<template>
  <div class="footer">
    <ul>
      <router-link tag="li" to="/">
        <div class="iconfont funcarea">&#xe607;</div>
        <p class="desc">功能区域</p>
      </router-link>
      <router-link tag="li" to="/Individual">
        <div class="iconfont individual">&#xe600;</div>
        <p class="desc">个人中心</p>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeFooter'
}
</script>

<style lang="stylus" scoped>
  .footer
    width: 100%
    height: 1.2rem
    position: fixed
    left: 0
    bottom: 0
    background: white
    border-top: .02rem #ebe8e3 solid
    ul
      display: flex
      text-align: center
      height: 1.2rem
      align-items: center
      li
        &:active
          .iconfont, .desc
            color: white
        flex: 1
        width: 50%
        height: 1rem
        .funcarea, .individual
          text-align: center
          font-size: .5rem
          color : #66cdaa
          padding-bottom: .1rem
        .desc
          color: #66cdaa
          font-style: 1rem
          font-size: .3rem
          line-height: .36rem
</style>
